<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>轮播图</title>
    <style>
      .carousel {
        background: #2f4357;
        margin-top: 20px;
      }
      .carousel-inner img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container-lg">
      <!-- 可以去掉data-ride="carousel"，然后使用jQuery实现自动播放的功能 -->
      <div id="cid" class="carousel slide" data-interval="3000">
        <!-- *******************************************指示器***************************************** -->
        <ol class="carousel-indicators">
          <!--  data-target="#cid" data-slide-to="0"这些属性也可以去掉，使用jQuery替换 -->
          <li class="slide-1 active"></li>
          <li class="slide-2"></li>
          <li class="slide-3"></li>
          <li class="slide-4"></li>
          <li class="slide-5"></li>
          <li class="slide-6"></li>
          <li class="slide-7"></li>
        </ol>
        <!-- ***********************************************轮播图主体************************************************************** -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="../images/mi1.jpg" class="img-fluid" />
            <div class="carousel-caption d-none d-md-block"></div>
          </div>
          <div class="carousel-item">
            <img src="../images/mi2.jpg" class="img-fluid" />
            <div class="carousel-caption d-none d-md-block">
              <h1>一级标题</h1>
            </div>
          </div>
          <div class="carousel-item">
            <img src="../images/mi3.jpg" class="img-fluid" />
            <div class="carousel-caption d-none d-md-block"></div>
          </div>
          <div class="carousel-item">
            <img src="../images/mi4.jpg" class="img-fluid" />
            <div class="carousel-caption d-none d-md-block"></div>
          </div>
          <div class="carousel-item">
            <img src="../images/mi5.jpg" class="img-fluid" />
            <div class="carousel-caption d-none d-md-block"></div>
          </div>
          <div class="carousel-item">
            <img src="../images/mi6.jpg" class="img-fluid" />
            <div class="carousel-caption d-none d-md-block"></div>
          </div>
          <div class="carousel-item">
            <img src="../images/mi7.jpg" class="img-fluid" />
            <div class="carousel-caption d-none d-md-block"></div>
          </div>
        </div>
        <!-- ***********************************************轮播图控制按钮************************************************************** -->
        <!-- data-slide="prev"可以使用jQuery替换 -->
        <a class="carousel-control-prev" href="#cid">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#cid">
          <span class="carousel-control-next-icon"></span>
        </a>
      </div>
    </div>
  </body>
  <script>
    // $(document).ready()页面一加载好就执行
    $(document).ready(function(){
        // 启用轮播图，等价于在轮播图主题添加data-ride="carousel"
        $("#cid").carousel();


        // 给向前滚动的按钮添加点击事件
        $(".carousel-control-prev").click(function(){
            // 让轮播图向前滚动，等价于data-slide="prev"
            $("#cid").carousel("prev");
        });
        $(".carousel-control-next").click(function(){
            // 让轮播图向后滚动
            $("#cid").carousel("next");
        });


        // 启动轮播图指示器，等价于data-target="#cid" data-slide-to="0"
        $(".slide-1").click(function(){
            $("#cid").carousel(0);
        })
        $(".slide-2").click(function(){
            $("#cid").carousel(1);
        })
        $(".slide-3").click(function(){
            $("#cid").carousel(2);
        })
        $(".slide-4").click(function(){
            $("#cid").carousel(3);
        })
        $(".slide-5").click(function(){
            $("#cid").carousel(4);
        })
        $(".slide-6").click(function(){
            $("#cid").carousel(5);
        })
        $(".slide-7").click(function(){
            $("#cid").carousel(6);
        })
       
    })
  </script>

</html>
